<template>
  <view class="student-list">
    <view
      class="box flex"
      v-for="(item, index) in list"
      :key="index"
      @click="goPage(index)">
      <image :src="item.img" mode="aspectFit" class="logo"></image>
      <view class="flex1 box-t">
        <view class="">{{ item.title }}</view>
        <view class="">{{ item.des }}</view>
      </view>
      <image
        src="/static/image/arrow.png"
        mode="aspectFit"
        class="arrow"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: require("@/static/image/s11.png"),
          title: "基础信息",
          des: "Basic information",
          route: "/student-info",
        },
        {
          img: require("@/static/image/s12.png"),
          title: "人生规划",
          des: "Life plan",
          route: "/student-plan",
        },
        {
          img: require("@/static/image/s13.png"),
          title: "七年级",
          des: "Seventh grade",
          route: "/student-grade",
        },
        {
          img: require("@/static/image/s14.png"),
          title: "八年级",
          des: "Eighth grade",
          route: "",
        },
        {
          img: require("@/static/image/s15.png"),
          title: "九年级",
          des: "Ninth grade",
          route: "",
        },
      ],
    };
  },
  methods: {
    goPage(k) {
      this.toRoute(this.list[k].route);
    },
  },
};
</script>

<style lang="scss" scoped>
.student-list {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 24upx 32upx;
  .box {
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 40upx 24upx;
    margin-bottom: 24upx;
    .logo {
      width: 88rpx;
      height: 88rpx;
      margin-right: 32upx;
    }
    .arrow {
      width: 13rpx;
      height: 24rpx;
      margin-left: 32px;
    }
    &-t {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      & > view:nth-of-type(1) {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 10upx;
      }
    }
  }
}
</style>
